<template>
  <div class="wrapper">
    <div class="header">
      <div class="iconfont header__back" @click="handleBack">&#xe697;</div>
      <div class="header__search">
        <span class="header__search__icon iconfont">&#xeace;</span>
        <input
          class="header__search__input"
          type="text"
          placeholder="请输入商品名称搜索"
          placeholder-class="input-placeholder"
        />
      </div>
    </div>
    <ShopItem v-if="data.item.imgUrl" :item="data.item" :hide-border="true" />
    <Content :shopName="data.item.name" />
  </div>
  <Cartpanel />

  <Toast v-if="toastData.isShow" :msg="toastData.msg" />
</template>

<script>
import Toast, { toastEffect } from "@/components/Toast";
import ShopItem from "@/components/ShopItem.vue";
import { useRouter, useRoute } from "vue-router";
import { get } from "@/API/axios";
import { ref, reactive } from "vue";
// 组件
import Content from "./Conteng.vue";
import Cartpanel from "./Cart.vue";

const useDataEffect = (showToast) => {
  const route = useRoute();
  const data = reactive({ item: {} });
  const getData = async () => {
    try {
      const res = await get(`/api/shop/${route.params.id}`);
      if (res?.errno === 0) {
        data.item = res.data;
      } else {
        showToast("登录错误", 2000);
      }
    } catch (error) {
      showToast(error, 2000);
    }
  };
  return { data, getData };
};

const useBackEffect = () => {
  //路由跳转
  const router = useRouter();
  const handleBack = () => {
    router.back();
  };
  return { handleBack };
};

export default {
  name: "shop",
  components: { ShopItem, Toast, Content, Cartpanel },
  setup() {
    //toast相关
    const { toastData, showToast } = toastEffect();

    //获取数据
    const route = useRoute();
    const paramId = ref(route.params.id);

    const { data, getData } = useDataEffect(showToast);
    const { handleBack } = useBackEffect();
    getData();

    return { data, handleBack, toastData };
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.input-placeholder {
  font-size: 0.14rem;
  color: $content-color;
  line-height: 0.16rem;
}

.wrapper {
  padding-top: 0.18rem;
}

.header {
  display: flex;
  align-items: center;
  height: 0.32rem;
  margin-bottom: 0.16rem;
  &__back {
    height: 0.32rem;
    width: 0.32rem;
    line-height: 0.32rem;
    font-size: 0.22rem;
    color: #b6b6b6;
  }
  &__search {
    position: relative;
    width: 3.1rem;
    height: 100%;
    background-color: $searchBgc-color;
    border-radius: 0.16rem;
    &__icon {
      width: 0.16rem;
      height: 0.16rem;
      position: absolute;
      left: 0.1rem;
      top: 50%;
      transform: translate3d(0, -50%, 0);
      font-size: 0.16rem;
      color: $icon-color;
    }
    &__input {
      position: absolute;
      left: 0.3rem;
      top: 50%;
      transform: translate3d(0, -50%, 0);
      width: 80%;
      height: 80%;
      border: none;
      outline: none;
      background: none;
      color: $content-color;
    }
  }
}
</style>
